import React from 'react';
import { Checkbox, Input } from 'antd';
import searchIcon from '../../assets/search.svg';

import './index.css';

type SearchProps = {
  active: boolean,
  deleted: boolean,
  invokeSearchMethod: any,
  changeSearchText: any,
  toggleActive: any,
  toggleDeleted: any
}

type SearchState = {
  active: boolean;
  deleted: boolean;
  searchText: string;
}

class Search extends React.Component<SearchProps, SearchState> {
  state = {
    active: true,
    deleted: false,
    searchText: ''
  };

  constructor(props: SearchProps) {
    super(props);
    this.setState({
      active: this.props.active,
      deleted: this.props.deleted
    });
  }

  toggleActive = () => {
    let state = !this.state.active;
    this.setState({ active: state });
    this.props.toggleActive(state);
  };

  toggleDelete = () => {
    let deleted = !this.state.deleted;
    this.setState({ deleted: deleted });
    this.props.toggleActive(deleted);
  };


  changeText = (e: any) => {
    let text = e.target.value;
    this.setState({
      searchText: text
    });
    this.props.changeSearchText(text);
  };


  searchUsers = (e: any) => {
    this.props.invokeSearchMethod(e);
  };

  render() {
    return (
      <div className="search-com-container">
        <Checkbox
          checked={this.state.active}
          onChange={this.toggleActive}
        >
          包含启用
        </Checkbox>

        <Checkbox
          checked={this.state.deleted}
          onChange={this.toggleDelete}
        >
          包含删除
        </Checkbox>

        <div className="search-content">
          <Input className="search-text" placeholder="键入搜索." onChange={this.changeText} value={this.state.searchText} onPressEnter={this.searchUsers} />
          <div className="search-icon" onClick={this.searchUsers}>
            <img src={searchIcon} alt="search" />
          </div>
        </div>
      </div>
    );
  }
}

export default Search;